<template>
  <div
    ref="diyTip"
    class="elli"
    @mouseenter="handleShow($event)"
    @mouseleave="handleHide($event)"
  >
    <slot></slot>
    <div class="showTip" ref="showTip" v-show="tipShow" @mouseenter="tipEnter" @mouseleave="tipLeave">
      {{ str }}
    </div>
  </div>
</template>

<script>
import { createPopper } from "@popperjs/core";
export default {
  data() {
    return {
      tipShow: false,
      str: "",
      openDelay: 1000,
      hideDelay: 300,
      timeOut: null,
      leaveTimeOut: null,
    };
  },

  methods: {
    handleShow(el) {
      if (el.target.scrollWidth > el.target.clientWidth) {
        this.str = el.target.innerText;
        this.timeOut && clearTimeout(this.timeOut);
        this.timeOut = setTimeout(() => {
          this.tipShow = true;
          document.body.appendChild(this.$refs.showTip);
          createPopper(el.target, this.$refs.showTip, {
            placement: "top",
            modifiers: [
              {
                name: "offset",
                options: {
                  offset: [0, 10],
                },
              },
            ],
          });
        }, this.openDelay);
      }
    },
    handleHide() {
      clearTimeout(this.timeOut);
      this.leaveTimeOut && clearInterval(this.leaveTimeOut);
      this.leaveTimeOut = setTimeout(() => {
        this.tipShow = false;
        this.$refs.diyTip.appendChild(this.$refs.showTip);
      }, this.hideDelay);
    },
    tipEnter() {
      clearInterval(this.leaveTimeOut)
      
    },
    tipLeave(){
      this.handleHide()
    }
  },
};
</script>

<style lang="less" scoped>
.elli {
  width: 100%;
  min-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.showTip {
  background: #303133;
  color: #fff;
  border-radius: 4px;
  padding: 10px;
  z-index: 2000;
  font-size: 12px;
  line-height: 1.2;
  min-width: 10px;
  word-wrap: break-word;
  &::after {
    content: "";
    display: block;
    position: absolute;
    border: 5px solid transparent;
    border-top-color: #303133;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
